<template>
    <div class="app-container user-manage">
        <!--部门数据-->
        <div class="left-menu">
            <div class="head-container">
                <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small"
                          prefix-icon="el-icon-search"/>
            </div>
            <div class="tree-container">
                <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                         :filter-node-method="filterNode" ref="tree" default-expand-all
                         @node-click="handleNodeClick"/>
            </div>
        </div>
        <!--用户数据-->
        <div class="right-list">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                <el-form-item label="登录名称" prop="userName">
                    <el-input v-model="queryParams.userName" placeholder="请输入登录名称" clearable size="small"
                              style="width: 240px" @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="手机号码" prop="phonenumber">
                    <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable size="small"
                              style="width: 240px" @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="queryParams.status" placeholder="请选择用户状态" clearable size="small"
                               style="width: 240px">
                        <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                                   :value="dict.dictValue"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                                    type="daterange" range-separator="-" start-placeholder="开始日期"
                                    end-placeholder="结束日期"></el-date-picker>
                </el-form-item>



                <el-form-item label="角色" prop="roleKey">
                    <el-select v-model="queryParams.roleKey" placeholder="请选择" @change="forceUpdate" style="width: 240px" clearable>
                        <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                                    :value="item.roleId" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标段机构" prop="organizationId">
                    <el-select v-model="queryParams.organizationId" placeholder="请选择标段机构" clearable size="small"
                               style="width: 240px">
                        <el-option v-for="dict in organization" :key="dict.id" :label="dict.label"
                                   :value="dict.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable size="small"
                              style="width: 240px" @keyup.enter.native="handleQuery"/>
                </el-form-item>



                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                               v-hasPermi="['system:user:add']">新增
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single"
                               @click="handleUpdate" v-hasPermi="['system:user:edit']">修改
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                               @click="handleDelete" v-hasPermi="['system:user:remove']">删除
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
                               v-hasPermi="['system:user:import']">导入
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                               v-hasPermi="['system:user:export']">导出
                    </el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center"/>
                <!--<el-table-column label="用户编号" align="center" prop="userId"/>-->
                <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true"/>
                <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true"/>
                <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true"/>
                <el-table-column label="手机号码" align="center" prop="phonenumber" width="120"/>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                                   @change="handleStatusChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                   v-hasPermi="['system:user:edit']">修改
                        </el-button>
                        <el-button v-if="scope.row.userId !== 1" size="mini" type="text" icon="el-icon-delete"
                                   @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-key" @click="handleResetPwd(scope.row)"
                                   v-hasPermi="['system:user:resetPwd']">重置
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </div>

        <!-- 添加或修改参数配置对话框 -->
        <el-dialog class="user-operate" :title="title" :visible.sync="open" width="600px" v-dialogDrag v-if="open"
                   append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户昵称" prop="nickName">
                            <el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="归属部门" prop="deptId">
                            <treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true"
                                        :show-count="true" placeholder="请选择归属部门"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item v-if="form.userId == undefined" label="登录名称" prop="userName">
                            <el-input v-model="form.userName" placeholder="请输入登录名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="form.userId == undefined" label="登录密码" prop="password">
                            <el-input v-model="form.password" placeholder="请输入登录密码" type="password"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-select v-model="form.sex" placeholder="请选择">
                                <el-option v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictLabel"
                                           :value="dict.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号码" prop="phonenumber">
                            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="角色" prop="roleId">
                            <el-select v-model="form.roleId" placeholder="请选择" @change="forceUpdate">
                                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                                           :value="item.roleId" :disabled="item.status == 1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.status">
                                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">
                                    {{dict.dictLabel}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户类别" prop="userType">
                            <el-select v-model="form.userType" placeholder="请选择" @change="getSelectData">
                                <el-option v-for="item in userTypeData" :key="item.dictValue" :label="item.dictLabel"
                                           :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.userType == '1'">
                        <el-form-item label="机构公司" prop="organizationId">
                            <treeselect v-model="form.organizationId" :options="organizationData" :disable-branch-nodes="true"
                                        :show-count="true" placeholder="请选择机构公司" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.userType == '2'">
                        <el-form-item label="监理公司" prop="supervisionId">
                            <treeselect v-model="form.supervisionId" :options="supervisorData" :disable-branch-nodes="true"
                                        :show-count="true" placeholder="请选择监理公司"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.organizationId || form.supervisionId">
                    <el-col :span="24">
                        <div class="line-item">
                            <span class="item-name"><i>*</i>部门行业</span>
                            <span class="item-value depart-industry">
                                <el-tree
                                        ref="departIndustryTree"
                                        :data="departIndustryData"
                                        show-checkbox
                                        :default-expanded-keys="secondaryIndustryIds"
                                        :default-checked-keys="secondaryIndustryIds"
                                        node-key="flag">
                                </el-tree>
                                <div class="el-form-item__error" v-if="isShowError">部门行业不能为空</div>
                            </span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body v-dialogDrag
                   v-if="open"
                   :close-on-click-modal="false">
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                       :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                       :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false"
                       drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                    <el-checkbox v-model="upload.updateSupport"/>
                    是否更新已经存在的用户数据
                    <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
                </div>
                <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        listUser,
        getUser,
        delUser,
        addUser,
        updateUser,
        exportUser,
        resetUserPwd,
        changeUserStatus,
        importTemplate,
        getOrganizationData,
        getSupervisorData,
        getOIndustryData,
        getSIndustryData
    } from '@/api/system/user'
    import {getOrganizationId} from "@/api/case/caseOperate"
    import { getToken } from '@/utils/auth'
    import { treeselect } from '@/api/system/dept'
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        name: 'User',
        components: { Treeselect },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 用户表格数据
                userList: null,
                // 弹出层标题
                title: '',
                // 部门树选项
                deptOptions: undefined,
                // 是否显示弹出层
                open: false,
                // 部门名称
                deptName: undefined,
                // 默认密码
                initPassword: undefined,
                // 日期范围
                dateRange: [],
                // 状态数据字典
                statusOptions: [],
                // 性别状态字典
                sexOptions: [],
                // 岗位选项
                postOptions: [],
                // 角色选项
                roleOptions: [],
                // 用户类别选项
                userTypeData: [],
                // 机构公司下拉数据
                organizationData: [],
                // 监理公司下拉数据
                supervisorData: [],
                // 部门行业数据
                departIndustryData: [],
                // 二级行业ids（用于编辑回显）
                secondaryIndustryIds: [],
                // 是否显示部门行业错误参数
                isShowError: false,
                // 表单参数
                form: {},
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                // 用户导入参数
                upload: {
                    // 是否显示弹出层（用户导入）
                    open: false,
                    // 弹出层标题（用户导入）
                    title: '',
                    // 是否禁用上传
                    isUploading: false,
                    // 是否更新已经存在的用户数据
                    updateSupport: 0,
                    // 设置上传的请求头部
                    headers: { Authorization: 'Bearer ' + getToken() },
                    // 上传的地址
                    url: process.env.VUE_APP_BASE_API + '/system/user/importData'
                },
                organization:[],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userName: undefined,
                    phonenumber: undefined,
                    status: undefined,  
                    deptId: undefined,
                    nickName:undefined,
                    roleKey:undefined,
                    organizationId:undefined
                },
                // 表单校验
                rules: {
                    userName: [
                        { required: true, message: '登录名称不能为空', trigger: 'blur' }
                    ],
                    nickName: [
                        { required: true, message: '用户昵称不能为空', trigger: 'blur' }
                    ],
                    deptId: [
                        { required: true, message: '归属部门不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '登录密码不能为空', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
                        {
                            type: 'email',
                            message: '\'请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                        }
                    ],
                    phonenumber: [
                        { required: true, message: '手机号码不能为空', trigger: 'blur' },
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: '请输入正确的手机号码',
                            trigger: 'blur'
                        }
                    ],
                    userType: [
                        { required: true, message: '用户类别不能为空', trigger: 'blur' }
                    ],
                    organizationId: [
                        { required: true, message: '机构公司不能为空', trigger: 'blur' }
                    ],
                    supervisionId: [
                        { required: true, message: '监理公司不能为空', trigger: 'blur' }
                    ],
                    roleId: [
                        { required: true, message: '角色不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        watch: {
            // 根据名称筛选部门树
            deptName(val) {
                this.$refs.tree.filter(val)
            },
            'form.organizationId': 'getOIndustryData',
            'form.supervisionId': 'getSIndustryData',
        },
        created() {
            this.getList()
            this.getTreeselect()
            this.getUserNew()
            this.getOrganizationId()
            this.getDicts('sys_normal_disable').then((response) => {
                this.statusOptions = response.data
            })
            this.getDicts('sys_user_sex').then((response) => {
                this.sexOptions = response.data
            })
            this.getConfigKey('sys.user.initPassword').then((response) => {
                this.initPassword = response.msg
            })
            this.getDicts('sys_user_type').then((response) => {
                this.userTypeData = response.data
            })
        },
        methods: {
            /**
             * @description: 通过部门编码查询养护机构
             * @param {*}
             * @return {*}
             */      
            getOrganizationId(){
                getOrganizationId().then((res) => {
                    if(res.code == 200){
                        this.organization = res.data
                    }
                }).catch((error) => {
                    console.log(error, 'getOrganizationId')
                })
            },   
            // 获取角色
            getUserNew(){
                getUser().then((response) => {
                    this.roleOptions = response.roles;
                })
            },
            forceUpdate(data){
                // this.$forceUpdate()
                this.$set(this.form,this.form.roleId,{roleId:this.form.roleId})
            },
            /** 查询用户列表 */
            getList() {
                this.loading = true
                listUser(this.addDateRange(this.queryParams,this.dateRange)).then(
                    (response) => {
                        this.userList = response.rows
                        this.total = response.total
                        this.loading = false
                    }
                )
            },
            /** 查询部门下拉树结构 */
            getTreeselect() {
                treeselect().then((response) => {
                    this.deptOptions = response.data
                })
            },
            /**
             * Description:获取机构（或监理）公司下拉数据
             * Author:ybt
             * Date:2020/9/24
             */
            getSelectData(){
                if (this.form.userType == '1') {
                    getOrganizationData({}).then((res) => {
                        this.organizationData = res.data;
                    }).catch((error) => {
                        console.log(error, 'getOrganizationData');
                    });
                } else if (this.form.userType == '2') {
                    getSupervisorData({}).then((res) => {
                        this.supervisorData = res.data;
                    }).catch((error) => {
                        console.log(error, 'getSupervisorData');
                    });
                }
            },
            /**
             * Description:获取机构（或监理）公司下的行业数据
             * Author:ybt
             * Date:2020/9/24
             */
            getOIndustryData(){
                if (this.form.organizationId) {
                    getOIndustryData({id: this.form.organizationId}).then((res) => {
                        this.departIndustryData = JSON.parse(res.data);
                        let industryTypelv2Ids = [];
                        if (this.secondaryIndustryIds && this.secondaryIndustryIds.length > 0) {
                            this.departIndustryData.forEach(first => {
                                first.children.forEach(second => {
                                    second.children.forEach(item => {
                                        if (this.secondaryIndustryIds.indexOf(item.id) !== -1) {
                                            // 二级行业ids（用于编辑回显）
                                            industryTypelv2Ids.push(item.flag);
                                        }
                                    })
                                })
                            })
                        }
                        this.secondaryIndustryIds = industryTypelv2Ids;
                    }).catch((error) => {
                        console.log(error, 'getOIndustryData');
                    });
                }
            },
            getSIndustryData(){
                if (this.form.supervisionId) {
                    getSIndustryData({id: this.form.supervisionId}).then((res) => {
                        this.departIndustryData = JSON.parse(res.data);
                        let industryTypelv2Ids = [];
                        if (this.secondaryIndustryIds && this.secondaryIndustryIds.length > 0) {
                            this.departIndustryData.forEach(first => {
                                first.children.forEach(second => {
                                    second.children.forEach(item => {
                                        if (this.secondaryIndustryIds.indexOf(item.id) !== -1) {
                                            // 二级行业ids（用于编辑回显）
                                            industryTypelv2Ids.push(item.flag);
                                        }
                                    })
                                })
                            })
                        }
                        this.secondaryIndustryIds = industryTypelv2Ids;
                    }).catch((error) => {
                        console.log(error, 'getSIndustryData');
                    });
                }
            },
            // 筛选节点
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            // 节点单击事件
            handleNodeClick(data) {
                this.queryParams.deptId = data.id
                this.getList()
            },
            // 用户状态修改
            handleStatusChange(row) {
                let text = row.status === '0' ? '启用' : '停用'
                this.$confirm(
                    '确认要"' + text + '""' + row.userName + '"用户吗?',
                    '警告',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                )
                    .then(function() {
                        return changeUserStatus(row.userId, row.status)
                    })
                    .then(() => {
                        this.msgSuccess(text + '成功')
                    })
                    .catch(function() {
                        row.status = row.status === '0' ? '1' : '0'
                    })
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.reset()
            },
            // 表单重置
            reset() {
                this.form = {
                    userId: undefined,
                    deptId: undefined,
                    userName: undefined,
                    nickName: undefined,
                    password: undefined,
                    phonenumber: undefined,
                    email: undefined,
                    sex: undefined,
                    status: '0',
                    remark: undefined,
                    postIds: [],
                    roleIds: [],
                    userType: undefined,
                    organizationId: undefined,
                    supervisionId: undefined,
                    industryTypelv2Ids: [],
                }
                this.resetForm('form')
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.page = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = []
                this.resetForm('queryForm')
                this.handleQuery()
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map((item) => item.userId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset()
                this.getTreeselect()
                getUser().then((response) => {
                    this.postOptions = response.posts
                    this.isShowError = false;
                    this.open = true
                    this.title = '添加用户'
                    this.form.password = this.initPassword
                })
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset()
                this.getTreeselect()
                const userId = row.userId || this.ids
                getUser(userId).then((response) => {
                    this.form = response.data;
                    this.postOptions = response.posts;
                    this.roleOptions = response.roles;
                    this.form.postIds = response.postIds;
                    if (response.roleIds && response.roleIds.length > 0) {
                        this.form.roleIds = response.roleIds;
                        this.form.roleId = response.roleIds.length > 0 && response.roleIds[0];
                    } else {
                        this.form.roleIds = [];
                        this.form.roleId = '';
                    }
                    this.form.userType = response.data.userType;
                    this.secondaryIndustryIds = response.data.industryTypelv2Ids;
                    if (this.form.userType == '1') {
                        this.form.organizationId = response.data.organizationId;
                    } else if (this.form.userType == '2') {
                        this.form.supervisionId = response.data.supervisionId;
                    }
                    this.getSelectData();
                    this.isShowError = false;
                    this.open = true
                    this.title = '修改用户'
                    this.form.password = ''
                })
            },
            /** 重置密码按钮操作 */
            handleResetPwd(row) {
                this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(({ value }) => {
                        resetUserPwd(row.userId, value).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess('修改成功，新密码是：' + value)
                            }
                        })
                    })
                    .catch(() => {
                    })
            },
            /** 提交按钮 */
            submitForm: function() {
                console.log(this.form, 9996636)
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.userType == '1') {
                            this.form.supervisionId = '';
                        } else if (this.form.userType == '2') {
                            this.form.organizationId = '';
                        }
                        this.form.deptIds = [];
                        this.form.deptIds.push(this.form.deptId);
                        this.form.roleIds = [];
                        if (this.form.roleId) {
                            this.form.roleIds.push(this.form.roleId);
                        }
                        this.form.industryTypelv2Ids = [];
                        if (this.form.userType != '0') {
                            let selectArray = this.$refs.departIndustryTree.getCheckedNodes();
                            if (!selectArray.length || selectArray.length === 0) {
                                this.isShowError = true;
                                return
                            }
                            selectArray.forEach(item => {
                                if (item.children === undefined) {
                                    this.form.industryTypelv2Ids.push(item.id)
                                }
                            })
                        }
                        if (this.form.userId != undefined) {
                            updateUser(this.form).then((response) => {
                                if (response.code === 200) {
                                    this.msgSuccess('修改成功')
                                    this.open = false
                                    this.getList()
                                }
                            })
                        } else {
                            addUser(this.form).then((response) => {
                                if (response.code === 200) {
                                    this.msgSuccess('新增成功')
                                    this.open = false
                                    this.getList()
                                }
                            })
                        }
                    }
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const userIds = row.userId || this.ids
                this.$confirm(
                    '是否确认删除用户编号为"' + userIds + '"的数据项?',
                    '警告',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                )
                    .then(function() {
                        return delUser(userIds)
                    })
                    .then(() => {
                        this.getList()
                        this.msgSuccess('删除成功')
                    })
                    .catch(function() {
                    })
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams
                this.$confirm('是否确认导出所有用户数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(function() {
                        return exportUser(queryParams)
                    })
                    .then((response) => {
                        this.download(response.msg)
                    })
                    .catch(function() {
                    })
            },
            /** 导入按钮操作 */
            handleImport() {
                this.upload.title = '用户导入'
                this.upload.open = true
            },
            /** 下载模板操作 */
            importTemplate() {
                importTemplate().then((response) => {
                    this.download(response.msg)
                })
            },
            // 文件上传中处理
            handleFileUploadProgress(event, file, fileList) {
                this.upload.isUploading = true
            },
            // 文件上传成功处理
            handleFileSuccess(response, file, fileList) {
                this.upload.open = false
                this.upload.isUploading = false
                this.$refs.upload.clearFiles()
                this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
                this.getList()
            },
            // 提交上传文件
            submitFileForm() {
                this.$refs.upload.submit()
            }
        }
    }
</script>
<style lang="scss">
    .user-manage{
        display: flex;
        flex-direction: row;
        .left-menu{
            width: 3rem;
            min-width: 3rem;
            max-width: 3rem;
            padding: 0.125rem;
            border-radius: 0.075rem;
            background-color: #FFFFFF;
            margin-right: 0.1875rem;
            .head-container{
                margin-bottom: 0.125rem;
            }
            .tree-container{
                height: calc(100% - 0.525rem);
                overflow: auto;
            }
        }
        .right-list{
            display: flex;
            flex-direction: column;
            flex: 1;
            width: calc(100% - 3.1875rem);
        }

    }
    .user-operate{
        .line-item{
            display: flex;
            flex-direction: row;
            line-height: 0.3rem;
            margin-top: -0.125rem;
            margin-bottom: 0.25rem;
            .item-name{
                width: 1rem;
                text-align: center;
                padding-right: 0.0625rem;
                i{
                    padding-right: 0.0625rem;
                    color: #f00;
                }
            }
            .item-value{
                flex: 1;
                position: relative;
            }
            .depart-industry{
                max-height: 3rem;
                overflow-y: auto;
            }
        }
    }
</style>
